<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>
      Screenshots
    </title>
    <style>
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
      text-align: center;
    }
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    li span {
      display: block;
      margin: 20px 0 3px;
    }
    img {
      max-width: 100%;
      height: auto;
      border: 0;
    }
    h2 {
      padding: 10px 0;
      position: sticky;
      top: 0;
      background: #fff;
      background: hsla(0, 0%, 100%, 0.85);
      text-transform: capitalize;
    }
    .tip {
      font-size: 14px;
      color: #666;
      padding: 10px;
      background: #f7f7f7;
    }
    .screenshot { overflow: hidden; }
    .up {
      position: fixed;
      right: 0;
      bottom: 0;
      margin: 10px;
      padding: 10px;
      width: 50px;
      height: 50px;
      border: 0;
      background: #000;
      cursor: pointer;
    }
    .up:before,
    .up:after {
      content: '';
      position: absolute;
      left: 15px;
      right: 15px;
      top: 20px;
      width: 20px;
      height: 20px;
      transform: rotate(45deg);
      background: #fff;
    }
    .up:after {
      transform: translateY(2px) rotate(45deg);
      background: #000;
    }
    .loaded .browser { display: none; }
    :target { display: block !important; }
    </style>
  </head>
  <body>
    <div class="tip">
      Press ←/→ key to switch between browsers
    </div>
    <div class="browser0 browser" id="chrome">
      <h2>
        chrome 14
      </h2>
      <ul>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="animation1.html" target="_blank"><span>animation1</span><img src="screenshot/chrome/animation1.png" alt="animation1"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="animation2.html" target="_blank"><span>animation2</span><img src="screenshot/chrome/animation2.png" alt="animation2"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="arrowKeys.html" target="_blank"><span>arrowKeys</span><img src="screenshot/chrome/arrowKeys.png" alt="arrowKeys"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="autoHeight.html" target="_blank"><span>autoHeight</span><img src="screenshot/chrome/autoHeight.png" alt="autoHeight"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="autoplay.html" target="_blank"><span>autoplay</span><img src="screenshot/chrome/autoplay.png" alt="autoplay"></a>
        </li>
        <li class="screenshot" style="height: 27.200000000000003em">
          <a href="base.html" target="_blank"><span>base</span><img src="screenshot/chrome/base.png" alt="base"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-non-loop.html" target="_blank"><span>center-non-loop</span><img src="screenshot/chrome/center-non-loop.png" alt="center-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-loop.html" target="_blank"><span>center-loop</span><img src="screenshot/chrome/center-loop.png" alt="center-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-non-loop.html" target="_blank"><span>center-fixedWidth-non-loop</span><img src="screenshot/chrome/center-fixedWidth-non-loop.png" alt="center-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-loop.html" target="_blank"><span>center-fixedWidth-loop</span><img src="screenshot/chrome/center-fixedWidth-loop.png" alt="center-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop.html" target="_blank"><span>center-autoWidth-non-loop</span><img src="screenshot/chrome/center-autoWidth-non-loop.png" alt="center-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop.html" target="_blank"><span>center-autoWidth-loop</span><img src="screenshot/chrome/center-autoWidth-loop.png" alt="center-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop-edgePadding.html" target="_blank"><span>center-autoWidth-non-loop-edgePadding</span><img src="screenshot/chrome/center-autoWidth-non-loop-edgePadding.png" alt="center-autoWidth-non-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop-edgePadding.html" target="_blank"><span>center-autoWidth-loop-edgePadding</span><img src="screenshot/chrome/center-autoWidth-loop-edgePadding.png" alt="center-autoWidth-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-non-loop.html" target="_blank"><span>center-lazyload-non-loop</span><img src="screenshot/chrome/center-lazyload-non-loop.png" alt="center-lazyload-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-loop.html" target="_blank"><span>center-lazyload-loop</span><img src="screenshot/chrome/center-lazyload-loop.png" alt="center-lazyload-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-non-loop.html" target="_blank"><span>center-lazyload-fixedWidth-non-loop</span><img src="screenshot/chrome/center-lazyload-fixedWidth-non-loop.png" alt="center-lazyload-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-loop.html" target="_blank"><span>center-lazyload-fixedWidth-loop</span><img src="screenshot/chrome/center-lazyload-fixedWidth-loop.png" alt="center-lazyload-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-non-loop.html" target="_blank"><span>center-lazyload-autoWidth-non-loop</span><img src="screenshot/chrome/center-lazyload-autoWidth-non-loop.png" alt="center-lazyload-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-loop.html" target="_blank"><span>center-lazyload-autoWidth-loop</span><img src="screenshot/chrome/center-lazyload-autoWidth-loop.png" alt="center-lazyload-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="customize.html" target="_blank"><span>customize</span><img src="screenshot/chrome/customize.png" alt="customize"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding-gutter.html" target="_blank"><span>edgePadding-gutter</span><img src="screenshot/chrome/edgePadding-gutter.png" alt="edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding.html" target="_blank"><span>edgePadding</span><img src="screenshot/chrome/edgePadding.png" alt="edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="few-items.html" target="_blank"><span>few-items</span><img src="screenshot/chrome/few-items.png" alt="few-items"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding-gutter.html" target="_blank"><span>fixedWidth-edgePadding-gutter</span><img src="screenshot/chrome/fixedWidth-edgePadding-gutter.png" alt="fixedWidth-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding.html" target="_blank"><span>fixedWidth-edgePadding</span><img src="screenshot/chrome/fixedWidth-edgePadding.png" alt="fixedWidth-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-gutter.html" target="_blank"><span>fixedWidth-gutter</span><img src="screenshot/chrome/fixedWidth-gutter.png" alt="fixedWidth-gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="fixedWidth.html" target="_blank"><span>fixedWidth</span><img src="screenshot/chrome/fixedWidth.png" alt="fixedWidth"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="frame1.html" target="_blank"><span>frame1</span><img src="screenshot/chrome/frame1.png" alt="frame1"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="frame2.html" target="_blank"><span>frame2</span><img src="screenshot/chrome/frame2.png" alt="frame2"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame3.html" target="_blank"><span>frame3</span><img src="screenshot/chrome/frame3.png" alt="frame3"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame5.html" target="_blank"><span>frame5</span><img src="screenshot/chrome/frame5.png" alt="frame5"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame6.html" target="_blank"><span>frame6</span><img src="screenshot/chrome/frame6.png" alt="frame6"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="gutter.html" target="_blank"><span>gutter</span><img src="screenshot/chrome/gutter.png" alt="gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="lazyload.html" target="_blank"><span>lazyload</span><img src="screenshot/chrome/lazyload.png" alt="lazyload"></a>
        </li>
        <li class="screenshot" style="height: 14.4em">
          <a href="nested.html" target="_blank"><span>nested</span><img src="screenshot/chrome/nested.png" alt="nested"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="non-loop.html" target="_blank"><span>non-loop</span><img src="screenshot/chrome/non-loop.png" alt="non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="rewind.html" target="_blank"><span>rewind</span><img src="screenshot/chrome/rewind.png" alt="rewind"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="slide-by-page.html" target="_blank"><span>slide-by-page</span><img src="screenshot/chrome/slide-by-page.png" alt="slide-by-page"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding-gutter.html" target="_blank"><span>vertical-edgePadding-gutter</span><img src="screenshot/chrome/vertical-edgePadding-gutter.png" alt="vertical-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding.html" target="_blank"><span>vertical-edgePadding</span><img src="screenshot/chrome/vertical-edgePadding.png" alt="vertical-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-gutter.html" target="_blank"><span>vertical-gutter</span><img src="screenshot/chrome/vertical-gutter.png" alt="vertical-gutter"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="vertical.html" target="_blank"><span>vertical</span><img src="screenshot/chrome/vertical.png" alt="vertical"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="start-index.html" target="_blank"><span>start-index</span><img src="screenshot/chrome/start-index.png" alt="start-index"></a>
        </li>
      </ul>
    </div>
    <div class="browser1 browser" id="firefox">
      <h2>
        firefox 12
      </h2>
      <ul>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="animation1.html" target="_blank"><span>animation1</span><img src="screenshot/firefox/animation1.png" alt="animation1"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="animation2.html" target="_blank"><span>animation2</span><img src="screenshot/firefox/animation2.png" alt="animation2"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="arrowKeys.html" target="_blank"><span>arrowKeys</span><img src="screenshot/firefox/arrowKeys.png" alt="arrowKeys"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="autoHeight.html" target="_blank"><span>autoHeight</span><img src="screenshot/firefox/autoHeight.png" alt="autoHeight"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="autoplay.html" target="_blank"><span>autoplay</span><img src="screenshot/firefox/autoplay.png" alt="autoplay"></a>
        </li>
        <li class="screenshot" style="height: 27.200000000000003em">
          <a href="base.html" target="_blank"><span>base</span><img src="screenshot/firefox/base.png" alt="base"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-non-loop.html" target="_blank"><span>center-non-loop</span><img src="screenshot/firefox/center-non-loop.png" alt="center-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-loop.html" target="_blank"><span>center-loop</span><img src="screenshot/firefox/center-loop.png" alt="center-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-non-loop.html" target="_blank"><span>center-fixedWidth-non-loop</span><img src="screenshot/firefox/center-fixedWidth-non-loop.png" alt="center-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-loop.html" target="_blank"><span>center-fixedWidth-loop</span><img src="screenshot/firefox/center-fixedWidth-loop.png" alt="center-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop.html" target="_blank"><span>center-autoWidth-non-loop</span><img src="screenshot/firefox/center-autoWidth-non-loop.png" alt="center-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop.html" target="_blank"><span>center-autoWidth-loop</span><img src="screenshot/firefox/center-autoWidth-loop.png" alt="center-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop-edgePadding.html" target="_blank"><span>center-autoWidth-non-loop-edgePadding</span><img src="screenshot/firefox/center-autoWidth-non-loop-edgePadding.png" alt="center-autoWidth-non-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop-edgePadding.html" target="_blank"><span>center-autoWidth-loop-edgePadding</span><img src="screenshot/firefox/center-autoWidth-loop-edgePadding.png" alt="center-autoWidth-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-non-loop.html" target="_blank"><span>center-lazyload-non-loop</span><img src="screenshot/firefox/center-lazyload-non-loop.png" alt="center-lazyload-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-loop.html" target="_blank"><span>center-lazyload-loop</span><img src="screenshot/firefox/center-lazyload-loop.png" alt="center-lazyload-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-non-loop.html" target="_blank"><span>center-lazyload-fixedWidth-non-loop</span><img src="screenshot/firefox/center-lazyload-fixedWidth-non-loop.png" alt="center-lazyload-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-loop.html" target="_blank"><span>center-lazyload-fixedWidth-loop</span><img src="screenshot/firefox/center-lazyload-fixedWidth-loop.png" alt="center-lazyload-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-non-loop.html" target="_blank"><span>center-lazyload-autoWidth-non-loop</span><img src="screenshot/firefox/center-lazyload-autoWidth-non-loop.png" alt="center-lazyload-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-loop.html" target="_blank"><span>center-lazyload-autoWidth-loop</span><img src="screenshot/firefox/center-lazyload-autoWidth-loop.png" alt="center-lazyload-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="customize.html" target="_blank"><span>customize</span><img src="screenshot/firefox/customize.png" alt="customize"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding-gutter.html" target="_blank"><span>edgePadding-gutter</span><img src="screenshot/firefox/edgePadding-gutter.png" alt="edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding.html" target="_blank"><span>edgePadding</span><img src="screenshot/firefox/edgePadding.png" alt="edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="few-items.html" target="_blank"><span>few-items</span><img src="screenshot/firefox/few-items.png" alt="few-items"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding-gutter.html" target="_blank"><span>fixedWidth-edgePadding-gutter</span><img src="screenshot/firefox/fixedWidth-edgePadding-gutter.png" alt="fixedWidth-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding.html" target="_blank"><span>fixedWidth-edgePadding</span><img src="screenshot/firefox/fixedWidth-edgePadding.png" alt="fixedWidth-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-gutter.html" target="_blank"><span>fixedWidth-gutter</span><img src="screenshot/firefox/fixedWidth-gutter.png" alt="fixedWidth-gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="fixedWidth.html" target="_blank"><span>fixedWidth</span><img src="screenshot/firefox/fixedWidth.png" alt="fixedWidth"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="frame1.html" target="_blank"><span>frame1</span><img src="screenshot/firefox/frame1.png" alt="frame1"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="frame2.html" target="_blank"><span>frame2</span><img src="screenshot/firefox/frame2.png" alt="frame2"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame3.html" target="_blank"><span>frame3</span><img src="screenshot/firefox/frame3.png" alt="frame3"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame5.html" target="_blank"><span>frame5</span><img src="screenshot/firefox/frame5.png" alt="frame5"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame6.html" target="_blank"><span>frame6</span><img src="screenshot/firefox/frame6.png" alt="frame6"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="gutter.html" target="_blank"><span>gutter</span><img src="screenshot/firefox/gutter.png" alt="gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="lazyload.html" target="_blank"><span>lazyload</span><img src="screenshot/firefox/lazyload.png" alt="lazyload"></a>
        </li>
        <li class="screenshot" style="height: 14.4em">
          <a href="nested.html" target="_blank"><span>nested</span><img src="screenshot/firefox/nested.png" alt="nested"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="non-loop.html" target="_blank"><span>non-loop</span><img src="screenshot/firefox/non-loop.png" alt="non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="rewind.html" target="_blank"><span>rewind</span><img src="screenshot/firefox/rewind.png" alt="rewind"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="slide-by-page.html" target="_blank"><span>slide-by-page</span><img src="screenshot/firefox/slide-by-page.png" alt="slide-by-page"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding-gutter.html" target="_blank"><span>vertical-edgePadding-gutter</span><img src="screenshot/firefox/vertical-edgePadding-gutter.png" alt="vertical-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding.html" target="_blank"><span>vertical-edgePadding</span><img src="screenshot/firefox/vertical-edgePadding.png" alt="vertical-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-gutter.html" target="_blank"><span>vertical-gutter</span><img src="screenshot/firefox/vertical-gutter.png" alt="vertical-gutter"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="vertical.html" target="_blank"><span>vertical</span><img src="screenshot/firefox/vertical.png" alt="vertical"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="start-index.html" target="_blank"><span>start-index</span><img src="screenshot/firefox/start-index.png" alt="start-index"></a>
        </li>
      </ul>
    </div>
    <div class="browser2 browser" id="ie">
      <h2>
        ie 9
      </h2>
      <ul>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="animation1.html" target="_blank"><span>animation1</span><img src="screenshot/ie/animation1.png" alt="animation1"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="animation2.html" target="_blank"><span>animation2</span><img src="screenshot/ie/animation2.png" alt="animation2"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="arrowKeys.html" target="_blank"><span>arrowKeys</span><img src="screenshot/ie/arrowKeys.png" alt="arrowKeys"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="autoHeight.html" target="_blank"><span>autoHeight</span><img src="screenshot/ie/autoHeight.png" alt="autoHeight"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="autoplay.html" target="_blank"><span>autoplay</span><img src="screenshot/ie/autoplay.png" alt="autoplay"></a>
        </li>
        <li class="screenshot" style="height: 27.200000000000003em">
          <a href="base.html" target="_blank"><span>base</span><img src="screenshot/ie/base.png" alt="base"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-non-loop.html" target="_blank"><span>center-non-loop</span><img src="screenshot/ie/center-non-loop.png" alt="center-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-loop.html" target="_blank"><span>center-loop</span><img src="screenshot/ie/center-loop.png" alt="center-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-non-loop.html" target="_blank"><span>center-fixedWidth-non-loop</span><img src="screenshot/ie/center-fixedWidth-non-loop.png" alt="center-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-loop.html" target="_blank"><span>center-fixedWidth-loop</span><img src="screenshot/ie/center-fixedWidth-loop.png" alt="center-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop.html" target="_blank"><span>center-autoWidth-non-loop</span><img src="screenshot/ie/center-autoWidth-non-loop.png" alt="center-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop.html" target="_blank"><span>center-autoWidth-loop</span><img src="screenshot/ie/center-autoWidth-loop.png" alt="center-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop-edgePadding.html" target="_blank"><span>center-autoWidth-non-loop-edgePadding</span><img src="screenshot/ie/center-autoWidth-non-loop-edgePadding.png" alt="center-autoWidth-non-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop-edgePadding.html" target="_blank"><span>center-autoWidth-loop-edgePadding</span><img src="screenshot/ie/center-autoWidth-loop-edgePadding.png" alt="center-autoWidth-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-non-loop.html" target="_blank"><span>center-lazyload-non-loop</span><img src="screenshot/ie/center-lazyload-non-loop.png" alt="center-lazyload-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-loop.html" target="_blank"><span>center-lazyload-loop</span><img src="screenshot/ie/center-lazyload-loop.png" alt="center-lazyload-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-non-loop.html" target="_blank"><span>center-lazyload-fixedWidth-non-loop</span><img src="screenshot/ie/center-lazyload-fixedWidth-non-loop.png" alt="center-lazyload-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-loop.html" target="_blank"><span>center-lazyload-fixedWidth-loop</span><img src="screenshot/ie/center-lazyload-fixedWidth-loop.png" alt="center-lazyload-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-non-loop.html" target="_blank"><span>center-lazyload-autoWidth-non-loop</span><img src="screenshot/ie/center-lazyload-autoWidth-non-loop.png" alt="center-lazyload-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-loop.html" target="_blank"><span>center-lazyload-autoWidth-loop</span><img src="screenshot/ie/center-lazyload-autoWidth-loop.png" alt="center-lazyload-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="customize.html" target="_blank"><span>customize</span><img src="screenshot/ie/customize.png" alt="customize"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding-gutter.html" target="_blank"><span>edgePadding-gutter</span><img src="screenshot/ie/edgePadding-gutter.png" alt="edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding.html" target="_blank"><span>edgePadding</span><img src="screenshot/ie/edgePadding.png" alt="edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="few-items.html" target="_blank"><span>few-items</span><img src="screenshot/ie/few-items.png" alt="few-items"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding-gutter.html" target="_blank"><span>fixedWidth-edgePadding-gutter</span><img src="screenshot/ie/fixedWidth-edgePadding-gutter.png" alt="fixedWidth-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding.html" target="_blank"><span>fixedWidth-edgePadding</span><img src="screenshot/ie/fixedWidth-edgePadding.png" alt="fixedWidth-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-gutter.html" target="_blank"><span>fixedWidth-gutter</span><img src="screenshot/ie/fixedWidth-gutter.png" alt="fixedWidth-gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="fixedWidth.html" target="_blank"><span>fixedWidth</span><img src="screenshot/ie/fixedWidth.png" alt="fixedWidth"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="frame1.html" target="_blank"><span>frame1</span><img src="screenshot/ie/frame1.png" alt="frame1"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="frame2.html" target="_blank"><span>frame2</span><img src="screenshot/ie/frame2.png" alt="frame2"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame3.html" target="_blank"><span>frame3</span><img src="screenshot/ie/frame3.png" alt="frame3"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame5.html" target="_blank"><span>frame5</span><img src="screenshot/ie/frame5.png" alt="frame5"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame6.html" target="_blank"><span>frame6</span><img src="screenshot/ie/frame6.png" alt="frame6"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="gutter.html" target="_blank"><span>gutter</span><img src="screenshot/ie/gutter.png" alt="gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="lazyload.html" target="_blank"><span>lazyload</span><img src="screenshot/ie/lazyload.png" alt="lazyload"></a>
        </li>
        <li class="screenshot" style="height: 14.4em">
          <a href="nested.html" target="_blank"><span>nested</span><img src="screenshot/ie/nested.png" alt="nested"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="non-loop.html" target="_blank"><span>non-loop</span><img src="screenshot/ie/non-loop.png" alt="non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="rewind.html" target="_blank"><span>rewind</span><img src="screenshot/ie/rewind.png" alt="rewind"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="slide-by-page.html" target="_blank"><span>slide-by-page</span><img src="screenshot/ie/slide-by-page.png" alt="slide-by-page"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding-gutter.html" target="_blank"><span>vertical-edgePadding-gutter</span><img src="screenshot/ie/vertical-edgePadding-gutter.png" alt="vertical-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding.html" target="_blank"><span>vertical-edgePadding</span><img src="screenshot/ie/vertical-edgePadding.png" alt="vertical-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-gutter.html" target="_blank"><span>vertical-gutter</span><img src="screenshot/ie/vertical-gutter.png" alt="vertical-gutter"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="vertical.html" target="_blank"><span>vertical</span><img src="screenshot/ie/vertical.png" alt="vertical"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="start-index.html" target="_blank"><span>start-index</span><img src="screenshot/ie/start-index.png" alt="start-index"></a>
        </li>
      </ul>
    </div>
    <div class="browser3 browser" id="edge">
      <h2>
        edge 15
      </h2>
      <ul>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="animation1.html" target="_blank"><span>animation1</span><img src="screenshot/edge/animation1.png" alt="animation1"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="animation2.html" target="_blank"><span>animation2</span><img src="screenshot/edge/animation2.png" alt="animation2"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="arrowKeys.html" target="_blank"><span>arrowKeys</span><img src="screenshot/edge/arrowKeys.png" alt="arrowKeys"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="autoHeight.html" target="_blank"><span>autoHeight</span><img src="screenshot/edge/autoHeight.png" alt="autoHeight"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="autoplay.html" target="_blank"><span>autoplay</span><img src="screenshot/edge/autoplay.png" alt="autoplay"></a>
        </li>
        <li class="screenshot" style="height: 27.200000000000003em">
          <a href="base.html" target="_blank"><span>base</span><img src="screenshot/edge/base.png" alt="base"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-non-loop.html" target="_blank"><span>center-non-loop</span><img src="screenshot/edge/center-non-loop.png" alt="center-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-loop.html" target="_blank"><span>center-loop</span><img src="screenshot/edge/center-loop.png" alt="center-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-non-loop.html" target="_blank"><span>center-fixedWidth-non-loop</span><img src="screenshot/edge/center-fixedWidth-non-loop.png" alt="center-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-loop.html" target="_blank"><span>center-fixedWidth-loop</span><img src="screenshot/edge/center-fixedWidth-loop.png" alt="center-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop.html" target="_blank"><span>center-autoWidth-non-loop</span><img src="screenshot/edge/center-autoWidth-non-loop.png" alt="center-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop.html" target="_blank"><span>center-autoWidth-loop</span><img src="screenshot/edge/center-autoWidth-loop.png" alt="center-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop-edgePadding.html" target="_blank"><span>center-autoWidth-non-loop-edgePadding</span><img src="screenshot/edge/center-autoWidth-non-loop-edgePadding.png" alt="center-autoWidth-non-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop-edgePadding.html" target="_blank"><span>center-autoWidth-loop-edgePadding</span><img src="screenshot/edge/center-autoWidth-loop-edgePadding.png" alt="center-autoWidth-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-non-loop.html" target="_blank"><span>center-lazyload-non-loop</span><img src="screenshot/edge/center-lazyload-non-loop.png" alt="center-lazyload-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-loop.html" target="_blank"><span>center-lazyload-loop</span><img src="screenshot/edge/center-lazyload-loop.png" alt="center-lazyload-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-non-loop.html" target="_blank"><span>center-lazyload-fixedWidth-non-loop</span><img src="screenshot/edge/center-lazyload-fixedWidth-non-loop.png" alt="center-lazyload-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-loop.html" target="_blank"><span>center-lazyload-fixedWidth-loop</span><img src="screenshot/edge/center-lazyload-fixedWidth-loop.png" alt="center-lazyload-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-non-loop.html" target="_blank"><span>center-lazyload-autoWidth-non-loop</span><img src="screenshot/edge/center-lazyload-autoWidth-non-loop.png" alt="center-lazyload-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-loop.html" target="_blank"><span>center-lazyload-autoWidth-loop</span><img src="screenshot/edge/center-lazyload-autoWidth-loop.png" alt="center-lazyload-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="customize.html" target="_blank"><span>customize</span><img src="screenshot/edge/customize.png" alt="customize"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding-gutter.html" target="_blank"><span>edgePadding-gutter</span><img src="screenshot/edge/edgePadding-gutter.png" alt="edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding.html" target="_blank"><span>edgePadding</span><img src="screenshot/edge/edgePadding.png" alt="edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="few-items.html" target="_blank"><span>few-items</span><img src="screenshot/edge/few-items.png" alt="few-items"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding-gutter.html" target="_blank"><span>fixedWidth-edgePadding-gutter</span><img src="screenshot/edge/fixedWidth-edgePadding-gutter.png" alt="fixedWidth-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding.html" target="_blank"><span>fixedWidth-edgePadding</span><img src="screenshot/edge/fixedWidth-edgePadding.png" alt="fixedWidth-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-gutter.html" target="_blank"><span>fixedWidth-gutter</span><img src="screenshot/edge/fixedWidth-gutter.png" alt="fixedWidth-gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="fixedWidth.html" target="_blank"><span>fixedWidth</span><img src="screenshot/edge/fixedWidth.png" alt="fixedWidth"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="frame1.html" target="_blank"><span>frame1</span><img src="screenshot/edge/frame1.png" alt="frame1"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="frame2.html" target="_blank"><span>frame2</span><img src="screenshot/edge/frame2.png" alt="frame2"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame3.html" target="_blank"><span>frame3</span><img src="screenshot/edge/frame3.png" alt="frame3"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame5.html" target="_blank"><span>frame5</span><img src="screenshot/edge/frame5.png" alt="frame5"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame6.html" target="_blank"><span>frame6</span><img src="screenshot/edge/frame6.png" alt="frame6"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="gutter.html" target="_blank"><span>gutter</span><img src="screenshot/edge/gutter.png" alt="gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="lazyload.html" target="_blank"><span>lazyload</span><img src="screenshot/edge/lazyload.png" alt="lazyload"></a>
        </li>
        <li class="screenshot" style="height: 14.4em">
          <a href="nested.html" target="_blank"><span>nested</span><img src="screenshot/edge/nested.png" alt="nested"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="non-loop.html" target="_blank"><span>non-loop</span><img src="screenshot/edge/non-loop.png" alt="non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="rewind.html" target="_blank"><span>rewind</span><img src="screenshot/edge/rewind.png" alt="rewind"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="slide-by-page.html" target="_blank"><span>slide-by-page</span><img src="screenshot/edge/slide-by-page.png" alt="slide-by-page"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding-gutter.html" target="_blank"><span>vertical-edgePadding-gutter</span><img src="screenshot/edge/vertical-edgePadding-gutter.png" alt="vertical-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding.html" target="_blank"><span>vertical-edgePadding</span><img src="screenshot/edge/vertical-edgePadding.png" alt="vertical-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-gutter.html" target="_blank"><span>vertical-gutter</span><img src="screenshot/edge/vertical-gutter.png" alt="vertical-gutter"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="vertical.html" target="_blank"><span>vertical</span><img src="screenshot/edge/vertical.png" alt="vertical"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="start-index.html" target="_blank"><span>start-index</span><img src="screenshot/edge/start-index.png" alt="start-index"></a>
        </li>
      </ul>
    </div>
    <div class="browser4 browser" id="safari">
      <h2>
        safari 5.1
      </h2>
      <ul>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="animation1.html" target="_blank"><span>animation1</span><img src="screenshot/safari/animation1.png" alt="animation1"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="animation2.html" target="_blank"><span>animation2</span><img src="screenshot/safari/animation2.png" alt="animation2"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="arrowKeys.html" target="_blank"><span>arrowKeys</span><img src="screenshot/safari/arrowKeys.png" alt="arrowKeys"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="autoHeight.html" target="_blank"><span>autoHeight</span><img src="screenshot/safari/autoHeight.png" alt="autoHeight"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="autoplay.html" target="_blank"><span>autoplay</span><img src="screenshot/safari/autoplay.png" alt="autoplay"></a>
        </li>
        <li class="screenshot" style="height: 27.200000000000003em">
          <a href="base.html" target="_blank"><span>base</span><img src="screenshot/safari/base.png" alt="base"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-non-loop.html" target="_blank"><span>center-non-loop</span><img src="screenshot/safari/center-non-loop.png" alt="center-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-loop.html" target="_blank"><span>center-loop</span><img src="screenshot/safari/center-loop.png" alt="center-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-non-loop.html" target="_blank"><span>center-fixedWidth-non-loop</span><img src="screenshot/safari/center-fixedWidth-non-loop.png" alt="center-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-loop.html" target="_blank"><span>center-fixedWidth-loop</span><img src="screenshot/safari/center-fixedWidth-loop.png" alt="center-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop.html" target="_blank"><span>center-autoWidth-non-loop</span><img src="screenshot/safari/center-autoWidth-non-loop.png" alt="center-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop.html" target="_blank"><span>center-autoWidth-loop</span><img src="screenshot/safari/center-autoWidth-loop.png" alt="center-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop-edgePadding.html" target="_blank"><span>center-autoWidth-non-loop-edgePadding</span><img src="screenshot/safari/center-autoWidth-non-loop-edgePadding.png" alt="center-autoWidth-non-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop-edgePadding.html" target="_blank"><span>center-autoWidth-loop-edgePadding</span><img src="screenshot/safari/center-autoWidth-loop-edgePadding.png" alt="center-autoWidth-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-non-loop.html" target="_blank"><span>center-lazyload-non-loop</span><img src="screenshot/safari/center-lazyload-non-loop.png" alt="center-lazyload-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-loop.html" target="_blank"><span>center-lazyload-loop</span><img src="screenshot/safari/center-lazyload-loop.png" alt="center-lazyload-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-non-loop.html" target="_blank"><span>center-lazyload-fixedWidth-non-loop</span><img src="screenshot/safari/center-lazyload-fixedWidth-non-loop.png" alt="center-lazyload-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-loop.html" target="_blank"><span>center-lazyload-fixedWidth-loop</span><img src="screenshot/safari/center-lazyload-fixedWidth-loop.png" alt="center-lazyload-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-non-loop.html" target="_blank"><span>center-lazyload-autoWidth-non-loop</span><img src="screenshot/safari/center-lazyload-autoWidth-non-loop.png" alt="center-lazyload-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-loop.html" target="_blank"><span>center-lazyload-autoWidth-loop</span><img src="screenshot/safari/center-lazyload-autoWidth-loop.png" alt="center-lazyload-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="customize.html" target="_blank"><span>customize</span><img src="screenshot/safari/customize.png" alt="customize"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding-gutter.html" target="_blank"><span>edgePadding-gutter</span><img src="screenshot/safari/edgePadding-gutter.png" alt="edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding.html" target="_blank"><span>edgePadding</span><img src="screenshot/safari/edgePadding.png" alt="edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="few-items.html" target="_blank"><span>few-items</span><img src="screenshot/safari/few-items.png" alt="few-items"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding-gutter.html" target="_blank"><span>fixedWidth-edgePadding-gutter</span><img src="screenshot/safari/fixedWidth-edgePadding-gutter.png" alt="fixedWidth-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding.html" target="_blank"><span>fixedWidth-edgePadding</span><img src="screenshot/safari/fixedWidth-edgePadding.png" alt="fixedWidth-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-gutter.html" target="_blank"><span>fixedWidth-gutter</span><img src="screenshot/safari/fixedWidth-gutter.png" alt="fixedWidth-gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="fixedWidth.html" target="_blank"><span>fixedWidth</span><img src="screenshot/safari/fixedWidth.png" alt="fixedWidth"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="frame1.html" target="_blank"><span>frame1</span><img src="screenshot/safari/frame1.png" alt="frame1"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="frame2.html" target="_blank"><span>frame2</span><img src="screenshot/safari/frame2.png" alt="frame2"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame3.html" target="_blank"><span>frame3</span><img src="screenshot/safari/frame3.png" alt="frame3"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame5.html" target="_blank"><span>frame5</span><img src="screenshot/safari/frame5.png" alt="frame5"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame6.html" target="_blank"><span>frame6</span><img src="screenshot/safari/frame6.png" alt="frame6"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="gutter.html" target="_blank"><span>gutter</span><img src="screenshot/safari/gutter.png" alt="gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="lazyload.html" target="_blank"><span>lazyload</span><img src="screenshot/safari/lazyload.png" alt="lazyload"></a>
        </li>
        <li class="screenshot" style="height: 14.4em">
          <a href="nested.html" target="_blank"><span>nested</span><img src="screenshot/safari/nested.png" alt="nested"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="non-loop.html" target="_blank"><span>non-loop</span><img src="screenshot/safari/non-loop.png" alt="non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="rewind.html" target="_blank"><span>rewind</span><img src="screenshot/safari/rewind.png" alt="rewind"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="slide-by-page.html" target="_blank"><span>slide-by-page</span><img src="screenshot/safari/slide-by-page.png" alt="slide-by-page"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding-gutter.html" target="_blank"><span>vertical-edgePadding-gutter</span><img src="screenshot/safari/vertical-edgePadding-gutter.png" alt="vertical-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding.html" target="_blank"><span>vertical-edgePadding</span><img src="screenshot/safari/vertical-edgePadding.png" alt="vertical-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-gutter.html" target="_blank"><span>vertical-gutter</span><img src="screenshot/safari/vertical-gutter.png" alt="vertical-gutter"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="vertical.html" target="_blank"><span>vertical</span><img src="screenshot/safari/vertical.png" alt="vertical"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="start-index.html" target="_blank"><span>start-index</span><img src="screenshot/safari/start-index.png" alt="start-index"></a>
        </li>
      </ul>
    </div>
    <div class="browser5 browser" id="opera">
      <h2>
        opera 12.15
      </h2>
      <ul>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="animation1.html" target="_blank"><span>animation1</span><img src="screenshot/opera/animation1.png" alt="animation1"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="animation2.html" target="_blank"><span>animation2</span><img src="screenshot/opera/animation2.png" alt="animation2"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="arrowKeys.html" target="_blank"><span>arrowKeys</span><img src="screenshot/opera/arrowKeys.png" alt="arrowKeys"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="autoHeight.html" target="_blank"><span>autoHeight</span><img src="screenshot/opera/autoHeight.png" alt="autoHeight"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="autoplay.html" target="_blank"><span>autoplay</span><img src="screenshot/opera/autoplay.png" alt="autoplay"></a>
        </li>
        <li class="screenshot" style="height: 27.200000000000003em">
          <a href="base.html" target="_blank"><span>base</span><img src="screenshot/opera/base.png" alt="base"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-non-loop.html" target="_blank"><span>center-non-loop</span><img src="screenshot/opera/center-non-loop.png" alt="center-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-loop.html" target="_blank"><span>center-loop</span><img src="screenshot/opera/center-loop.png" alt="center-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-non-loop.html" target="_blank"><span>center-fixedWidth-non-loop</span><img src="screenshot/opera/center-fixedWidth-non-loop.png" alt="center-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-fixedWidth-loop.html" target="_blank"><span>center-fixedWidth-loop</span><img src="screenshot/opera/center-fixedWidth-loop.png" alt="center-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop.html" target="_blank"><span>center-autoWidth-non-loop</span><img src="screenshot/opera/center-autoWidth-non-loop.png" alt="center-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop.html" target="_blank"><span>center-autoWidth-loop</span><img src="screenshot/opera/center-autoWidth-loop.png" alt="center-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-non-loop-edgePadding.html" target="_blank"><span>center-autoWidth-non-loop-edgePadding</span><img src="screenshot/opera/center-autoWidth-non-loop-edgePadding.png" alt="center-autoWidth-non-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-autoWidth-loop-edgePadding.html" target="_blank"><span>center-autoWidth-loop-edgePadding</span><img src="screenshot/opera/center-autoWidth-loop-edgePadding.png" alt="center-autoWidth-loop-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-non-loop.html" target="_blank"><span>center-lazyload-non-loop</span><img src="screenshot/opera/center-lazyload-non-loop.png" alt="center-lazyload-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-loop.html" target="_blank"><span>center-lazyload-loop</span><img src="screenshot/opera/center-lazyload-loop.png" alt="center-lazyload-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-non-loop.html" target="_blank"><span>center-lazyload-fixedWidth-non-loop</span><img src="screenshot/opera/center-lazyload-fixedWidth-non-loop.png" alt="center-lazyload-fixedWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-fixedWidth-loop.html" target="_blank"><span>center-lazyload-fixedWidth-loop</span><img src="screenshot/opera/center-lazyload-fixedWidth-loop.png" alt="center-lazyload-fixedWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-non-loop.html" target="_blank"><span>center-lazyload-autoWidth-non-loop</span><img src="screenshot/opera/center-lazyload-autoWidth-non-loop.png" alt="center-lazyload-autoWidth-non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="center-lazyload-autoWidth-loop.html" target="_blank"><span>center-lazyload-autoWidth-loop</span><img src="screenshot/opera/center-lazyload-autoWidth-loop.png" alt="center-lazyload-autoWidth-loop"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="customize.html" target="_blank"><span>customize</span><img src="screenshot/opera/customize.png" alt="customize"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding-gutter.html" target="_blank"><span>edgePadding-gutter</span><img src="screenshot/opera/edgePadding-gutter.png" alt="edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="edgePadding.html" target="_blank"><span>edgePadding</span><img src="screenshot/opera/edgePadding.png" alt="edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="few-items.html" target="_blank"><span>few-items</span><img src="screenshot/opera/few-items.png" alt="few-items"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding-gutter.html" target="_blank"><span>fixedWidth-edgePadding-gutter</span><img src="screenshot/opera/fixedWidth-edgePadding-gutter.png" alt="fixedWidth-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-edgePadding.html" target="_blank"><span>fixedWidth-edgePadding</span><img src="screenshot/opera/fixedWidth-edgePadding.png" alt="fixedWidth-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="fixedWidth-gutter.html" target="_blank"><span>fixedWidth-gutter</span><img src="screenshot/opera/fixedWidth-gutter.png" alt="fixedWidth-gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="fixedWidth.html" target="_blank"><span>fixedWidth</span><img src="screenshot/opera/fixedWidth.png" alt="fixedWidth"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="frame1.html" target="_blank"><span>frame1</span><img src="screenshot/opera/frame1.png" alt="frame1"></a>
        </li>
        <li class="screenshot" style="height: 11.200000000000001em">
          <a href="frame2.html" target="_blank"><span>frame2</span><img src="screenshot/opera/frame2.png" alt="frame2"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame3.html" target="_blank"><span>frame3</span><img src="screenshot/opera/frame3.png" alt="frame3"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame5.html" target="_blank"><span>frame5</span><img src="screenshot/opera/frame5.png" alt="frame5"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="frame6.html" target="_blank"><span>frame6</span><img src="screenshot/opera/frame6.png" alt="frame6"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="gutter.html" target="_blank"><span>gutter</span><img src="screenshot/opera/gutter.png" alt="gutter"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="lazyload.html" target="_blank"><span>lazyload</span><img src="screenshot/opera/lazyload.png" alt="lazyload"></a>
        </li>
        <li class="screenshot" style="height: 14.4em">
          <a href="nested.html" target="_blank"><span>nested</span><img src="screenshot/opera/nested.png" alt="nested"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="non-loop.html" target="_blank"><span>non-loop</span><img src="screenshot/opera/non-loop.png" alt="non-loop"></a>
        </li>
        <li class="screenshot" style="height: 9.600000000000001em">
          <a href="rewind.html" target="_blank"><span>rewind</span><img src="screenshot/opera/rewind.png" alt="rewind"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="slide-by-page.html" target="_blank"><span>slide-by-page</span><img src="screenshot/opera/slide-by-page.png" alt="slide-by-page"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding-gutter.html" target="_blank"><span>vertical-edgePadding-gutter</span><img src="screenshot/opera/vertical-edgePadding-gutter.png" alt="vertical-edgePadding-gutter"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-edgePadding.html" target="_blank"><span>vertical-edgePadding</span><img src="screenshot/opera/vertical-edgePadding.png" alt="vertical-edgePadding"></a>
        </li>
        <li class="screenshot" style="height: 8em">
          <a href="vertical-gutter.html" target="_blank"><span>vertical-gutter</span><img src="screenshot/opera/vertical-gutter.png" alt="vertical-gutter"></a>
        </li>
        <li class="screenshot" style="height: 16em">
          <a href="vertical.html" target="_blank"><span>vertical</span><img src="screenshot/opera/vertical.png" alt="vertical"></a>
        </li>
        <li class="screenshot" style="height: 12.8em">
          <a href="start-index.html" target="_blank"><span>start-index</span><img src="screenshot/opera/start-index.png" alt="start-index"></a>
        </li>
      </ul>
    </div><button class="up"></button> 
    <script>

    var doc = document,
        current = 0,
        min = 0,
        max = doc.querySelectorAll('.browser').length - 1,
        browsers = doc.querySelectorAll('.browser'),
        body = doc.body;

    body.className += 'loaded';
    if (!location.hash) { location.hash = '#' + browsers[0].id; }

    doc.addEventListener('keydown', function(e) {
      switch(e.keyCode) {
        case 37:
          update(-1);
          break;
        case 39:
          update(1);
      }
    });

    function update (num) {
      current += num;
      current = Math.max(min, Math.min(max, current));
      // if (current > max) {
      //   current = min;
      // } else if (current < min) {
      //   current = max;
      // }

      location.hash = '#' + browsers[current].id;
    }

    var scrollTo = (function () {
      return function (to, duration) {
        var body = document.body,
            html = document.documentElement,
            wh = (html || body.parentNode || body).clientHeight,
            bh = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ),
            total = to + wh,
            goal = bh - wh - 1;
            
        if (total > bh) { to = goal; }
        to = Math.round(to);

        function runScroll(element, to, duration) {
          if (duration < 0) { return; }
          var difference = to - element.scrollTop,
              perTick = difference / duration * 10,
              running;

          var run = function () {
            element.scrollTop += perTick;
            if (element.scrollTop === to) { return; }
            runScroll(element, to, duration - 10);

            running = false;
          };

          if (!running) {
            running = true;
            if (window.requestAnimationFrame) {
              window.requestAnimationFrame(run);
            } else {
              setTimeout(run, 10);
            }
          }
        }

        runScroll(document.body, to, duration);
        runScroll(document.documentElement, to, duration);
      };
    })();

    var up = doc.querySelector('.up');
    up.addEventListener('click', function() {
      scrollTo(0, 100);
    });
    </script>
  </body>
</html>
